<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: ''
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: string): void
}>()

const mode = ref('')

const changeMode = (val: string) => {
  if (val === mode.value) {
    return
  }
  mode.value = val
  emit('update:modelValue', val)
}

watch(
  () => props.modelValue,
  (newVal) => {
    mode.value = newVal
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="mode-setting-wrapper">
    <div
      :class="{
        'mode-btn': true,
        active: mode === 'all'
      }"
      @click="changeMode('all')"
    >
      全部用户
    </div>
    <div
      :class="{
        'mode-btn': true,
        active: mode === 'dept'
      }"
      @click="changeMode('dept')"
    >
      按组织结构
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mode-setting-wrapper {
  display: flex;
  margin-bottom: 20px;
  .mode-btn {
    padding: 8px 16px;
    background: #eeeeee;
    border-radius: 8px;
    cursor: pointer;
    &.active {
      background: var(--theme-color);
      color: #ffffff;
    }
  }
  .mode-btn + .mode-btn {
    margin-left: 10px;
  }
}
</style>
